<template>
    <div class="white-box">
      <base-steps :active="stepActive" :arrs="[{text:'基本信息',steps:0},{text:'扩展信息',steps:1},{text:'商品详情',steps:2}]"></base-steps>

      <el-tabs v-model="tabsActive" type="card" >
        <template v-for="(item, index) in tabs">
          <el-tab-pane :label="item.label" :name="item.value">
<!--            <component :is="item.value"></component>-->
          </el-tab-pane>
        </template>
      </el-tabs>

      <info v-show="tabsActive === 'info'"></info>
      <sku v-show="tabsActive === 'sku'"></sku>
      <other v-show="tabsActive === 'other'"></other>
      <commission v-show="tabsActive === 'commission'"></commission>
      <logistics v-show="tabsActive === 'logistics'"></logistics>
      <detail v-show="tabsActive === 'detail'"></detail>

        <div class="foot-btn flexs-center" style="margin-top: 30px">
<!--          <el-button type="primary" size="large" :loading="form_loading" @click="submitNewsForm(ruleNewsRef)"> 确认添加 </el-button>-->
          <el-button type="default" size="large" @click="prevStep" v-if="stepActive != 0"> 上一步 </el-button>
          <el-button type="primary" size="large" @click="nextStep" v-if="stepActive != 2"> 下一步 </el-button>
          <el-button type="primary" size="large" @click=""> 保存 </el-button>
        </div>
        <!-- 图片库 -->
<!--        <picture-library :show="showImg" :select_multiple="img_type == 1 ? false : true" @close="showImg = false" @select="selectImg"> </picture-library>-->

        <go-back />
    </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, computed} from "vue"
import { useRouter } from "vue-router"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import "@wangeditor/editor/dist/css/style.css"
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import BaseSteps from "@components/BaseSteps.vue";
import info from "./components/info.vue";
import sku from "./components/sku.vue";
import other from "./components/other.vue";
import commission from "./components/commission.vue";
import logistics from "./components/logistics.vue";
import detail from "./components/detail.vue";




const router = useRouter()
const { proxy } = getCurrentInstance()

const stepActive = ref(0)
const tabsActive = ref('info')
const tabs = computed(()=>{
  if(stepActive.value == 0){
    return [
      {label:'基础信息',value:'info'},
      {label:'商品规格',value:'sku'},
      {label:'其他设置',value:'other'},
    ]
  }else if (stepActive.value == 1){
    return [
      {label:'佣金设置',value:'commission'},
      {label:'物流设置',value:'logistics'},
      {label:'购物设置',value:'gouwu'},
      {label:'消费奖励',value:'xiaofei'},
    ]
  }else{
    return [
      {label:'商品详情',value:'detail'}
    ]
  }
})
const nextStep = () =>{
  stepActive.value += 1;
  tabsActive.value = tabs.value[0].value
}
const prevStep = () =>{
  stepActive.value -= 1;
  tabsActive.value = tabs.value[0].value
}


onMounted(() => {
    // getClass()
})

/**
 * 添加
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Number} classType 弹窗类型，1是添加，2是编辑
 * @property {Array} ruleNewsRef 表单规则
 * @property {Object} ruleNewsForm  表单字段
 * @property {Object} ruleNews  表单提示
 * @property {Function} submitNewsForm 提交表单
 */
const form_loading = ref(false)
const submitNewsForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let htmls = ""
            if (valueHtml.value) {
                htmls = valueHtml.value.replace(/\bhttps?:\/\/(.*?)\/+/gi, "") // 去除图片根域名以及根域名后面的'/'
            }

            let cid = ""
            cid = Array.isArray(ruleNewsForm.cate_id) ? ruleNewsForm.cate_id[ruleNewsForm.cate_id.length - 1] : ruleNewsForm.cate_id
            form_loading.value = true
            proxy.$axios
                .post("article/add", {
                    cate_id: cid,
                    title: proxy.$util.replaceStr(ruleNewsForm.title),
                    thumb: ruleNewsForm.img_paths,
                    on_time: ruleNewsForm.dates,
                    order_by: ruleNewsForm.sort,
                    hidden: ruleNewsForm.news_status,
                    audit: ruleNewsForm.audit,
                    content: htmls,
                })
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "添加成功！", type: "success" })
                        router.push("/News/NewsList")
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}


// 获取分类
const class_options = ref([])
function getClass() {
    proxy.$axios
        .get("article/add")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                class_options.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "NewsAdd",
}
</script>

<style lang="less" scoped>

</style>
